<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>星辰诞愿 - 用户列表</title>
    <style>
        /* 基础样式 - 保持与home.html一致 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }
        body {
            background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
            color: #fff;
            min-height: 100vh;
        }
        /* 导航栏 - 与home.html一致 */
        .nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 30px;
            background: rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(10px);
            position: sticky;
            top: 0;
            z-index: 100;
            border-bottom: 1px solid rgba(255, 107, 107, 0.2);
        }
        .nav-left {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        .nav-logo {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #ff6b6b;
        }
        .blog-title {
            font-size: 24px;
            font-weight: bold;
            background: linear-gradient(to right, #ff6b6b, #ffa3a3);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 0 10px rgba(255, 107, 107, 0.3);
        }
        .nav-right {
            display: flex;
            align-items: center;
            gap: 20px;
        }
        .nav-link {
            color: white;
            text-decoration: none;
            padding: 8px 15px;
            border-radius: 20px;
            transition: all 0.3s ease;
        }
        .nav-link:hover {
            background: rgba(255, 107, 107, 0.3);
        }
        /* 主内容区 */
        .container {
            max-width: 1200px;
            margin: 30px auto;
            padding: 0 20px;
        }
        .page-title {
            text-align: center;
            margin-bottom: 30px;
            font-size: 2rem;
            background: linear-gradient(to right, #ff6b6b, #ffcc5c);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        /* 用户表格 */
        .user-table {
            width: 100%;
            border-collapse: collapse;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        }
        .user-table th,
        .user-table td {
            padding: 15px;
            text-align: left;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        .user-table th {
            background: rgba(255, 107, 107, 0.2);
            color: #ffcc5c;
            font-weight: bold;
        }
        .user-table tr:hover {
            background: rgba(255, 107, 107, 0.1);
        }
        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #ff8e9e;
            margin-right: 10px;
            vertical-align: middle;
        }
        .user-name {
            color: #ffa3a3;
            font-weight: bold;
        }
        .user-role {
            padding: 5px 10px;
            border-radius: 15px;
            font-size: 0.8rem;
            background: rgba(255, 203, 107, 0.2);
            color: #ffcc5c;
        }
        .user-blessings {
            color: #ff6b6b;
            font-weight: bold;
        }
        .user-birthday {
            color: #7bed9f;
        }
        .user-created {
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.9rem;
        }
        .msg-btn {
            padding: 6px 12px;
            border-radius: 20px;
            background: rgba(107, 178, 255, 0.2);
            color: #6bb2ff;
            border: 1px solid rgba(107, 178, 255, 0.5);
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 0.8rem;
            margin-left: 10px;
        }

        .msg-btn:hover {
            background: rgba(107, 178, 255, 0.4);
            box-shadow: 0 0 10px rgba(107, 178, 255, 0.3);
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .container {
                padding: 0 10px;
            }
            .user-table th,
            .user-table td {
                padding: 10px 5px;
                font-size: 0.9rem;
            }
            .page-title {
                font-size: 1.5rem;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <div class="nav">
        <div class="nav-left">
            <img class="nav-logo" src="pic/cat.jpg" alt="小猫">
            <span class="blog-title">星辰诞愿</span>
        </div>
        <div class="nav-right">
            <a class="nav-link" href="home.html">返回首页</a>
        </div>
    </div>
    <!-- 主内容区 -->
    <div class="container">
        <h1 class="page-title">🎂 用户列表 🎂</h1>
        <table class="user-table">
            <thead>
            <tr>
                <th>ID</th>
                <th>用户</th>
                <th>生日</th>
                <th>身份</th>
                <th>祝福数</th>
                <th>注册时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="user-list">
            <!-- 用户数据将通过JS动态生成 -->
            </tbody>
        </table>
        <div class="pagination" style="display: flex; justify-content: center; margin-top: 20px; gap: 10px;">
            <button id="prev-page" style="background: #ffb8c6; color: white; border: none; padding: 8px 15px; border-radius: 20px; cursor: pointer;">上一页</button>
            <div id="page-info" style="display: flex; align-items: center; color: #d23369; font-weight: bold;"></div>
            <button id="next-page" style="background: #ffb8c6; color: white; border: none; padding: 8px 15px; border-radius: 20px; cursor: pointer;">下一页</button>
        </div>
    </div>
    <script src="js/common.js"></script>
    <script src="js/jquery.min.js"></script>
    <script>
        $(document).ajaxSend(function(e, xhr){
            let token = localStorage.getItem("user_token");
            xhr.setRequestHeader("user_token_header", token);
        });
        //当前页码
        let currentPage = 1;
        const pageSize = 5;
        function loadUserInfoList(page = 1){
            currentPage = page;
            $.ajax({
                type: "get",
                url: '/user/getUserInfoList?page=' + currentPage + '&size=' + pageSize,
                success: function(result) {
                    if (result.code === "SUCCESS" && result.data != null) {
                        let userInfoList = result.data;
                        let finalHtml = '';
                        for(let user of userInfoList) {
                            finalHtml += `
                        <tr>
                            <td>${user.id}</td>
                            <td>
                                <img id="${user.id}" class="user-avatar" alt="${user.userName}">
                                <span class="user-name">${user.userName}</span>
                            </td>
                            <td class="user-birthday">${user.birthday}</td>
                            <td><span class="user-role">${user.powerStatus}</span></td>
                            <td class="user-blessings">${user.blessCount}</td>
                            <td class="user-created">${user.createTimeStatus}</td>
                            <td>
                                <button class="msg-btn" onclick="sendMessage(${user.id}, '${user.userName}')">私信</button>
                            </td>
                        </tr>`;
                        }
                        $("#user-list").html(finalHtml);
                        for(let user of userInfoList) {
                            let id = user.id;
                            $.ajax({
                                type:"get",
                                url:"user/downloadById",
                                data:{
                                    id:id
                                },
                                xhrFields: {
                                    responseType: 'blob'
                                },
                                success:function (blob){
                                    const url = URL.createObjectURL(blob);
                                    $("#" + id).attr("src",url);
                                },
                            })
                        }
                        updateUserInfoPaginationInfo(userInfoList.length);
                    }
                },
                error: function(error) {
                    if (error != null && error.status === 401) {
                        location.href = "login.html";
                    }
                }
            });
        }
        // 更新分页信息
        function updateUserInfoPaginationInfo(total) {
            // 控制按钮状态,currentPage <= 1时不能翻上一页,currentPage >= totalPages不能翻下一页
            $("#prev-page").prop("disabled", currentPage <= 1);
            $("#next-page").prop("disabled", total < pageSize);
        }
        // 上一页按钮点击事件
        $("#prev-page").click(function() {
            loadUserInfoList(currentPage - 1);
        });
        // 下一页按钮点击事件
        $("#next-page").click(function() {
            loadUserInfoList(currentPage + 1);
        });
        //私信的功能
        function sendMessage(userId, userName) {
            // 这里可以添加私信逻辑
            alert("敬请期待");
        }
        loadUserInfoList(1);
    </script>
</body>
</html>